<template>
  <tn-nav-bar fixed alpha customBack>
    <view slot="back" class='tn-custom-nav-bar__back'
          @click="goBack">
      <text class='icon tn-icon-left-arrow'></text>
    </view>

    <slot name="center"></slot>
  </tn-nav-bar>
</template>

<script>
import template_page_mixin from 'libs/mixin/template_page_mixin.js'
export default {
  name: "nav-back",
  mixins: [template_page_mixin],
}
</script>

<style lang="scss" scoped>
/* 胶囊*/
.tn-custom-nav-bar__back {
  width: 60%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }
}
</style>